<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>按钮</title>
  <link href="../css/bootstrap.min.css" rel="stylesheet">
  <link href="../css/materialdesignicons.min.css" rel="stylesheet">
  <link href="../css/style.min.css" rel="stylesheet">
</head>

<body>
  <div class="container-fluid p-t-15">
    <div class="row">
      <div class="col-lg-12">
        <div class="card">
          <header class="card-header">
            <div class="card-title">普通按钮</div>
          </header>
          <div class="card-body">
            <button class="custom-btn">默认</button>
            <button class="custom-btn primary">成功</button>
            <button class="custom-btn danger">危险</button>
            <button class="custom-btn warning">警告</button>
            <button class="custom-btn disabled">禁用</button>
          </div>
        </div>
      </div>
      <div class="col-lg-12">
        <div class="card">
          <header class="card-header">
            <div class="card-title">镂空按钮</div>
          </header>
          <div class="card-body">
            <button class="custom-btn primary plain">成功</button>
            <button class="custom-btn danger plain">危险</button>
            <button class="custom-btn warning plain">警告</button>
          </div>
        </div>
      </div>
      <div class="col-lg-12">
        <div class="card">
          <header class="card-header">
            <div class="card-title">图标按钮</div>
          </header>
          <div class="card-body">
            <!-- 要使用图标按钮必须引入 iconfont.css 跟 iconfont.js 文件 -->
            <button class="custom-btn icontext primary">
              <i class="icon iconfont icon-edit1"></i>成功
            </button>
            <button class="custom-btn icon primary plain">
              <i class="icon iconfont icon-edit1"></i>
            </button>
            <button class="custom-btn icon danger">
              <i class="icon iconfont icon-shanchu"></i>
            </button>
            <button class="custom-btn icon danger plain">
              <i class="icon iconfont icon-shanchu"></i>
            </button>
            <button class="custom-btn icon primary">
              <i class="icon iconfont icon-xinzeng"></i>
            </button>
            <button class="custom-btn icon primary plain">
              <i class="icon iconfont icon-xinzeng"></i>
            </button>
            <button class="custom-btn icon primary plain">
              <i class="icon iconfont icon-view"></i>
            </button>
          </div>
        </div>
      </div>
      <div class="col-lg-12">
        <div class="card">
          <header class="card-header">
            按钮
          </header>
          <div class="card-body">
            <table class="table table-bordered table-striped table-vcenter">
              <thead>
                <tr>
                  <th>按钮</th>
                  <th>class=""</th>
                  <th>按钮</th>
                  <th>class=""</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>
                    <button class="custom-btn">默认按钮</button>
                  </td>
                  <td>custom-btn</td>
                  <td>
                    <button class="custom-btn primary">主要按钮</button>
                  </td>
                  <td>custom-btn primary</td>
                </tr>
                <tr>
                  <td>
                    <button class="custom-btn danger">危险按钮</button>
                  </td>
                  <td>custom-btn danger</td>
                  <td>
                    <button class="custom-btn warning">警告按钮</button>
                  </td>
                  <td>custom-btn warning</td>
                </tr>
                <tr>
                  <td>
                    <button class="custom-btn disabled">禁用按钮</button>
                  </td>
                  <td>custom-btn disabled</td>
                  <td>
                    <button class="custom-btn primary plain">主要镂空按钮</button>
                  </td>
                  <td>custom-btn primary plain</td>
                </tr>
                <tr>
                  <td>
                    <button class="custom-btn icontext primary">
                      <i class="icon iconfont icon-edit1"></i>成功图标按钮
                    </button>
                  </td>
                  <td>custom-btn icontext primary</td>
                  <td>
                    <button class="custom-btn icon primary">
                      <i class="icon iconfont icon-edit1"></i>
                    </button>
                    图标按钮
                  </td>
                  <td>custom-btn icon primary</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script type="text/javascript" src="../js/jquery.min.js"></script>
  <script type="text/javascript" src="../js/popper.min.js"></script>
  <script type="text/javascript" src="../js/bootstrap.min.js"></script>
  <script type="text/javascript" src="../js/main.min.js"></script>
</body>

</html>